<template>
  <div id="app">
    <router-view></router-view>
    <form action="">
      <input type="text" name="name" v-model="name" placeholder="请输入您的姓名">
      <input type="text" name="age" v-model="age" placeholder="请输入您的年龄">
      <input type="submit" value="提交">
    </form>
    
    <tab-bar>
      <!--  传的 activeColor 通过 父组件传到 子组件，子组件通过 props 接受，当用户点击的时候通过 active 来判断是否改变颜色 -->
      <tab-bar-item path="home" activeColor="orange">
        <template v-slot:tab-bar-item-icon>
          <img src="../src/assets/home.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-icon-active>
          <img src="../src/assets/homeActive.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-text>首页</template>
      </tab-bar-item>
      <tab-bar-item path="cart">
        <template v-slot:tab-bar-item-icon>
          <img src="../src/assets/cart.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-icon-active>
          <img src="../src/assets/cartActive.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-text>购物</template>
      </tab-bar-item>
      <tab-bar-item path="message">
        <template v-slot:tab-bar-item-icon>
          <img src="../src/assets/message.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-icon-active>
          <img src="../src/assets/messageActive.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-text>消息</template>
      </tab-bar-item>
      <tab-bar-item path="profile">
        <template v-slot:tab-bar-item-icon>
          <img src="../src/assets/profile.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-icon-active>
          <img src="../src/assets/profileActive.jpeg" alt="" />
        </template>
        <template v-slot:tab-bar-item-text>我的</template>
      </tab-bar-item>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from './components/tab-bar/TabBar'
import TabBarItem from './components/tab-bar/TabBarItem'

export default {
  name: 'App',
  data() {
    return {
      name: '',
      age: 24,
    }
  },
  methods: {
    handleItemClick() {
      console.log('hahahah')
    },
  },
  components: {
    // HelloWorld,
    TabBar,
    TabBarItem,
  },
}
</script>

<style lang="less" scoped></style>
